<template>
    <div class="bookwrap">        
        <div class="lottery"> 
             <img v-if="showWheel" class="pic_lottery" src="https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/lottery_circle.png?sign=ec5a30f831dd0b23e818497f5ad3edcf&t=1651200204" 
                width="100%" alt="">
             <LuckyWheel
                ref="myLucky"
                width="350px"
                height="350px"
                :prizes="prizes"
                :blocks="blocks"
                :buttons="buttons"
                @start="startCallback"
                @end="endCallback"
                class="luckyComm"
                :pointer="showPointer"
                v-if="showWheel"
             /> <br>
             <div v-if="showQuery" class="showInput" > 
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="查询">
                        <el-input v-model="formInline.cphone" placeholder="输入您的手机号" />
                    </el-form-item>                  
                      <el-form-item>
                        <el-button type="primary" @click="onSubmitPhone"> 查 询 抽 奖 </el-button>
                      </el-form-item>
                </el-form>
             </div>
        </div>   
        <div class="bgg"> ui </div>      
    </div>
</template>

<script>
    import { ref, getCurrentInstance, computed, onMounted, reactive } from 'vue'
    import { useStore } from 'vuex'
    import {useRouter, useRoute} from 'vue-router'
    import { Toast } from 'vant';
    // import { ElMessage } from 'element-plus'
    import utils from "../router/util";
    import randomImgVue from './randomImg.vue';

    export default {
        setup () {
            const router = useRouter();  
            const route = useRoute();
            console.log('RouterZ', route.query.name, route.query.road);      
            const routeQueryUser = route.query.name // todo 获取抽奖用户名
            const{ getters, dispatch } = useStore()

      let  blocks= reactive ([{ padding: '13px', background: '#617df2' }])
      let prizes =  reactive( [                                           // 礼品清单
        { fonts: [{ text: 'QQ音乐大屏会员', top: '10%' }], background: '#f9281f' },
        { fonts: [{ text: '文广十套', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '爱奇艺大屏会员', top: '10%' }], background: '#f9281f' },
        { fonts: [{ text: '咖啡礼盒', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '礼品5', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '礼品6', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '礼品7', top: '10%' }], background: '#b895f2' },
         { fonts: [{ text: '礼品8', top: '10%' }], background: '#b815f2' },
        { fonts: [{ text: '礼品9', top: '10%' }], background: '#e9e8fe' },
      ] ) 
      let buttons = reactive ( [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px', fontColor: 'white' }]
        },
      ] ) 
    let showPointer = ref(false)  // 转盘指针显示
    let showWheel = ref(true) // 转盘显示
    let showQuery = ref(true) // 查询模块显示
    let myLucky = ref(null)
    let luckyIndex = ref(0)
    // 点击抽奖按钮会触发star回调
    const startCallback = ()=> {
      if(!routeQueryUser){
          return
      }
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        luckyIndex.value = Math.floor(Math.random()*8)
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(luckyIndex.value)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    const endCallback =  (prize)=> {
      console.log( prize.fonts[0].text, luckyIndex.value)
      // 给当前用户录入新礼品
        $axios({
            method: 'post',
            url: `gifts/new_gift/${ routeQueryUser }`,   
            data:{
                gifts: prize.fonts[0].text
            }  
        }).then((res)=>{
            if(res){
                console.log('Axios New_gift res', res.data, res.status)  // 更新用户订单状态/已录入->已抽奖
                if(res.status && res.status=='error'){
                    Toast('抽奖次数已用完，感谢参与') 
                    buttons[2].pointer = false
                     buttons[2].fonts= [{ text: '已抽奖', top: '-20px', fontColor: 'black' }]
                }else{
                    $axios({
                        method: 'post',
                        url: `gifts/record2draw/${ routeQueryUser }`,     
                    }).then((res)=>{
                        if(res.status && res.status!='error'){
                            console.log('Axios record2draw res', res)       
                            Toast(`${routeQueryUser} 恭喜你抽中了 ${ prize.fonts[0].text }`)      
                        }
                    }).catch(error=>{
                        console.log('Axios record2draw error', error)
                        Toast('抽奖未成功，请稍后重试', error)                    
                    } )    
                }   
                
            }
        }).catch(error=>{
            console.log('Axios record2draw error', error)
             Toast('录入未成功，请稍后重试', error)
        } ) 

    }

    const formInline = reactive({
        cphone: ''
    })
    const onSubmitPhone = () => {
        console.log('submit!', formInline.cphone)
                $axios({
                    method: 'get',
                    url: `gifts/queryPhone/${formInline.cphone}`,     
                }).then((res)=>{
                    if(res.data){
                        console.log('Axios present res', res.data )                                       
                        Toast('开始抽奖！')       
                        showWheel.value = true
                        showQuery.value =false                        
                    }else{
                        console.log('Axios present no', res.data )         
                        showWheel.value = false
                        Toast('未参与抽奖的用户')                         
                    }
                }).catch(error=>{
                    console.log('Axios error', error)

                } ) 
    }
            
     onMounted(async()=>{
                // userInfo.value = utils.getCookie('user') // console.log('用户类型', userInfo)    
                console.log('Mounted##User', routeQueryUser)
                if( !routeQueryUser || routeQueryUser.length<1 ){
                    showWheel.value = false
                }
                $axios({
                    method: 'get',
                    url: `present/all/1`,     
                }).then((res)=>{
                    if(res){
                        console.log('Axios present res', typeof(res.data[0][1].content) )               
                        let giftList = (res.data[0][1].content ).split(',')
                        console.log('Axios present res2', giftList )     
                        for(var xkey in giftList) {
                            console.log(xkey); // 0 1 2 3 4 返回数组索引
                            prizes[xkey].fonts[0].text = giftList[xkey] // 更新服务器礼品到转盘上
                        }
                    }
                }).catch(error=>{
                    console.log('Axios error', error)
                } ) 
            })
            const currentInstance = getCurrentInstance()
            const { $mapp, $axios } = currentInstance.appContext.config.globalProperties
            return { 
                blocks ,
                prizes,
                buttons,
                startCallback,
                endCallback,
                myLucky,
                luckyIndex,
                showPointer,
                formInline,
                onSubmitPhone,
                showWheel,
                showQuery
                }
        },
    }
</script>
<style scoped>
.bookwrap{
    text-align: center;
    width: 100%;
    margin-top: -1rem;
    font-size: 20rpx;
    background: linear-gradient(115deg, orange, white);
}
.vansForm{
    /* margin-left: -0.933333rem !important; */
    width: 100%;
    font-size: 0.3rem ;
    margin-top: 0.9rem;
}
.van-field__value{
    background-color: antiquewhite !important;
}
.userInfo{
    position: absolute;
    top: 5px;
    right: 70px;
}
.logout{
    position: absolute;
    right: -60px;
    top: -1px;
    font-size: 12px;
    line-height: 28px;
    color: darkgoldenrod;
}
.verty_btn{
    font-size: 12px;
    position: relative;
    top: -5px;
}
.userInfo  .van-button__text{
    font-size: 16px !important;
}
.listWrap {
        position: relative;
        margin-top: 20px;
}
 .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    width: 190px;
  }
.custom-value {
    margin-right: 9px;
    vertical-align: middle;
    font-size: 16px;
  }
.custom-value_uncheck{
    margin-right: 9px;
    vertical-align: middle;
    font-size: 16px;
    color: red;
}
.search{
    position: relative;
    margin-top: 70px;
}
.infoUserText{
    font-size: 16px;
}
.lottery{
 position: relative;
    top: 3.28rem;
    /* left: 7.9%; */
    /* background: plum; */
    /* border-radius: 2.533333rem; */
    margin: 10px auto;
    width: 344px;
}
.pic_lottery {
    width: 10.666667rem;
    position: absolute;
    left: -0.796667rem;
    top: -40px;
    margin: 1px auto;
}
.bgg{
    width: 100%;
    height: 1050px;
    background: linear-gradient(115deg, orange, white);
    top: -100px;
    position: absolute;
    z-index: -1;
}
.showInput{
    position: relative;
    z-index: 100;
    margin-top: 50px;
}
.luckyComm {
    /* overflow: hidden; */
    width: 9rem;
    height: 9rem;
    /* position: absolute; */
    /* left: 0.4rem; */
    /* top: 0.64rem; */
    margin: 1px auto;
    border: 2px dotted red;
    border-radius: 155px ;
}

@media screen and (max-width: 393px) {
    .pic_lottery {
    width: 10.666667rem;
    position: absolute;
    left: -0.796667rem;
    top: -35px;
    margin: 1px auto;
}
}
@media screen and (max-width: 414px) {
    .pic_lottery {
    width: 10.666667rem;
    position: absolute;
    left: -0.696667rem;
    top: -40px;
    margin: 1px auto;
}
}

</style>